<template>
  <view class="content">
	<!-- 额度申请 -->
	<view class="money-box">
		<image src="/static/index/map.png" mode=""></image>
		<view>
			<view class="money-img">
				<view>中国银行-海天味业</view>
				<text>经销贷</text>
			</view>		
		</view>
	</view>
    <view class="list">
	  <view class="list-call-title">
		<text class="sl-tile-title">请准备以下资料清单，并上传：</text>
	  </view>
	  <view class="list-call-title">
	  	<text class="sl-tile-license"><uni-icons class="checkbox-filled" type="checkbox-filled" size="19"></uni-icons>营业执照影印件</text>
		<text class="sl-example">注册已上传</text>
	  </view>
	  <view class="list-call-title">
	  	<text class="sl-tile-license"><uni-icons class="checkbox-filled" type="checkbox-filled" size="19"></uni-icons>企业章程</text>
	  	<text class="sl-example">
			<text class="download" @tap="downloadFile">下载</text>
			<text class="uploading" @tap="upLicense">重新上传</text>
		</text>
	  </view>
	  <view class="list-call-license">
		<view>
		  <view class="sl-tile-upLicense"><uni-icons class="info-filled"  type="info-filled" size="19"></uni-icons>企业章程</view>
		  <view class="sl-tile-describeLicense">请上传您的企业章程</view>
		</view>
		<view class="sl-tile-img" @tap="upLicense">
		  <image src="/static/index/enterprise.png"></image>
		</view>
	  </view>
	  <view class="list-call-title">
	  	<text class="sl-tile-license"><uni-icons class="checkbox-filled" type="checkbox-filled" size="19"></uni-icons>财务报表</text>
	  	<text class="sl-example">
	  			<text class="download" @tap="downloadFile">下载</text>
	  			<text class="uploading" @tap="upLicense">重新上传</text>
	  		</text>
	  </view>
	  <view class="list-call-license">
		<view>
		  <view class="sl-tile-upLicense"><uni-icons class="info-filled"  type="info-filled" size="19"></uni-icons>财务报表</view>
		  <view class="sl-tile-describeLicense">请上传您的财务报表</view>
		</view>
		<view class="sl-tile-img" @tap="upLicense">
		  <image src="/static/index/finance.png"></image>
		</view>
	  </view>
    </view>
    <view class="footBox">
	  <button @tap="bindLogin" class="nextStep">提交</button>
    </view>
  </view>
</template>

<script>
  var js;
  export default {
    onUnload() {
     
    },
    data() {
      return {
		license: '../../static/register/license.png',
      };
    },
	mounted() {

	},
	onShow() {

	},
    methods: {
	  // 上传营业执照
	  upLicense() {
        var _this = this
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: function (res) {
				_this.license = Array.isArray(res.tempFilePaths) ? res.tempFilePaths[0] : res.tempFilePaths
			}
		});
	  },
	  // 下载
	  downloadFile() {
		  uni.downloadFile({
			url: 'https://trainzifp.izejin.com/api/common/upload-file', //仅为示例，并非真实的资源
			success: (res) => {
				if (res.statusCode === 200) {
					console.log('下载成功');
				}
			}
		  });
	  },
	  bindLogin() {
		  uni.showModal({
		    title: '提示',
		    content: '确认资料填写无误!',
		    showCancel: true,
		    cancelText: '取消',
		    confirmText: '确认',
		    success: function (res) {
		      if (res.confirm) {
				uni.redirectTo({
					url: '/pages/clt/index'
				});
		      } else if (res.cancel) {
		        console.log('用户点击取消');
		      }
		    }
		  });
	  }
    }
  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
	height: 100%;
  }
  
  .list {
    display: flex;
    flex-direction: column;
    padding-top: 30rpx;
    padding-left: 25rpx;
    padding-right: 25rpx;
	background: #FFFFFF;
	
  }
  .sl-tile-img {
	  width: 300rpx;
	  height: 214rpx;
  }
  .sl-tile-img image{
  	  width: 300rpx;
  	  height: 214rpx;
  }
  .list-call-title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 98rpx;
    color: #333333;
  }
  /deep/.uni-date__x-input{
	width: auto;
	height: 35px;
	color: grey;
	position: relative;
	flex: 1;
	line-height: 35px;
	font-size: 19px;
	overflow: hidden;
  }
  .list-call-license {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: self-start;
	height: 280rpx;
	margin-top: 30rpx;
  }
  .sl-tile-upLicense {
	font-size: 32rpx;
	color: #333333;
	line-height: 32rpx;
	font-weight: 500;
  }
  .sl-tile-describeLicense {
	font-size: 24rpx;
	color: #999999;
	letter-spacing: 0;
	line-height: 32rpx;
	font-weight: 400;
	margin-top: 15rpx;
	margin-left: 47rpx;
  }
  .sl-tile-title {
	font-size: 32rpx;
	color: #000000;
	line-height: 32rpx;
	font-weight: 600;
  }
  .sl-tile-license {
	font-size: 32rpx;
	color: #000000;
	line-height: 32rpx;
	font-weight: 600;
  }
  .sl-tile {
	font-size: 32rpx;
	color: #333333;
	font-weight: 400;
  }
  .sl-example {
    font-size: 28rpx;
    color: #315EFB;
    letter-spacing: 0;
    text-align: center;
    font-weight: 400;
  }
  .footBox {
	position: fixed;
	bottom: 0rpx;
	display: flex;
	align-items: center;
	width: 100%;
	bottom: 0rpx;
	height: 190rpx;
	background: #FFFFFF;
  }
  .nextStep {
	  color: #FFFFFF;
	  font-size: 34rpx;
	  width: 670rpx;
	  height: 98rpx;
	  line-height: 98rpx;
	  background: #315EFB;
	  border-radius: 49rpx;
	  text-align: center;
  }
  .money-box{
	  position: relative;
  	  display: flex;
  	  flex-direction: column;
	  margin: 25rpx;
  }
  .money-box view{
  	  z-index: 999;
  }
  .money-box image{
  	  position: absolute;
  	  height: 100%;
  	  width: 100%;
  }
  .money-img{
  	  height: 238rpx;
  	  margin: 25rpx 0;
		background-image: url('');
		background-repeat: no-repeat;
  	  border-radius: 16rpx;
  	  display: flex;
  	  flex-direction: column;
  	  justify-content: center;
  	  align-items: center;
  }
  .money-img view{
  	  margin-bottom: 25rpx;
  	  font-size: 32rpx;
  	  color: #642D13;
  	  font-weight: 400;
  }
  .money-img text{
  	  margin-bottom: 25rpx;
  	  font-size: 48rpx;
  	  color: #642D13;
  	  font-weight: 600;
  }
  .checkbox-filled{
  	  color: #42b983!important;
	  font-size: 42rpx;
	  margin-right: 15rpx;
  }
  .info-filled{
  	  color: #C9C9C9!important;
	  font-size: 42rpx;
	  margin-right: 15rpx;
  }
  .download{
  	  margin-right: 29rpx;
	  text-decoration: underline;
  }
  .uploading{
  	  display: inline-block;
	  width: 160rpx;
	  height: 56rpx;
	  background: #315EFB;
	  border-radius: 8rpx;
	  color: #ffffff;
	  line-height: 56rpx;
  }
</style>
